<template>
  <div class="tableAdd">
    <div style="position: relative">
      <div style="display: flex">
        <div class="subTitle" v-if="title">
          <span class="line"></span> <span style="color: #3f8ffc">{{ title }}</span>
        </div>
        <div class="footerButton" v-if="ISBianji">
          <van-button type="info" size="small" @click="handleAddusers11('添加')">{{ button1[0] }}</van-button>
          <van-button type="info" size="small" @click="handleAddusers11('删除')">{{ button1[1] }}</van-button>
        </div>
      </div>
      <el-table size="small" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange111">
        <el-table-column type="selection" width="30" v-if="ISBianji"> </el-table-column>
        <el-table-column v-for="(it, in1) in contentData1" :key="in1" :prop="it.key" :label="it.label" align="center">
        <template slot-scope="scope">
          <!-- 处理枚举数据 -->
          <span v-if="it.key === 'RERECONNAISSANCE'">{{ scope.row.RERECONNAISSANCE == '5'?'是':'否' }}</span>
          <!-- <span v-else-if="it.key == 'SEX'">{{ scope.row.SEX == '3'?'男':'女' }}</span> -->
          <span v-else>{{ scope.row[it.key] }}</span>
        </template>
        </el-table-column>
      </el-table>
    </div>
    <van-dialog v-model="isShow111" :title="'新增'" show-cancel-button @confirm="saveBtn11" @cancel="cancelBtn11">
      <van-form validate-first>
        <div style="padding: 10px">
          <div v-for="(item, index) in contentData">
            <!-- 是否需要市区县 -->
            <van-field
              style="border-bottom: 1px solid rgb(210, 210, 210)"
              v-if="item.ISinput"
              :type="item.types"
              :required="item.required"
              :placeholder="'请输入' + item.label"
              :readonly="disable ? true : !item.readonly"
              v-model="JFData[0][item.key]"
              :label="item.label">
              <template #button v-if="item.buttonTest">
                <van-button size="small" type="primary">{{ buttonTest }}</van-button>
              </template>
            </van-field>
            <selectPicker
              v-if="item.isTime"
              :isTime="true"
              :ISrequired="disable ? true : !item.readonly"
              :bitian="item.required"
              :labels="item.label"
              :keys="item.key"
              :placeholder="'请选择'"
              :selectValue="JFData[0][item.key]"
              @getMessage="setValue"></selectPicker>
            <selectPicker
              v-else-if="!item.ISinput && !item.isTime"
              :isTime="false"
              :keys="item.key"
              :buttonTest="item.buttonTest"
              :bitian="item.required"
              :ISrequired="disable ? true : !item.readonly"
              :values="'DICNAME'"
              :DICID="'DICID'"
              :placeholder="item.label"
              :columns="item.NYDARR"
              :labels="item.label"
              :selectValue="JFData[0][item.key] | inUseName(item.NYDARR)"
              @getMessage="setValue1">
            </selectPicker>
          </div>
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import selectPicker from '@/utils/selectPicker'
import { FileServerProxy } from '@/utils/api'
import { v4 as uuidv4 } from 'uuid'
import { GSA_Add, GSA_Search } from '@/common/commonApi'
export default {
  filters: {
    inUseName1: function (msg, data) {
      try {
        let name = ''
        data.forEach((item) => {
          if (item.citycode == msg) {
            name = item.cityname
          }
        })
        return name
      } catch (err) {
        console.log(err)
      }
    },
    inUseName: function (msg, data) {
      try {
        let name = ''
        data.forEach((item) => {
          if (item.DICID == msg) {
            name = item.DICNAME
          }
        })
        return name
      } catch (err) {
        console.log(err)
      }
    }
  },
  data() {
    return {
      isShow111: false,
      multipleSelection111: [],
      tableData:[],
      isadd:true //新增还是修改
    }
  },
  mounted() {},
  created() {
    this.getData()
    this.getEnum()
  },
  methods: {
    //新增
    async saveBtn11() {
        console.log(this.JFData[0],'BLSJ')
        this.tableData.push(this.JFData[0])
        let uuid1 = uuidv4()
        this.JFData[0].TO_ROW_GUID = this.rowData.ROW_GUID
        this.JFData[0].ROW_GUID = uuid1
        this.JFData[0].eca_RowState = 'added'
        delete this.JFData[0].PKID
        const date = await GSA_Add(this.dataguid, true,this.JFData[0])
        this.getData()
    },
    cancelBtn11() {},
    handleSelectionChange111(val) {
      this.multipleSelection111 = val
    },
    setValue(name, val, label, key) {
      /**
       * name: 需要展示的name
       *  val： 选择的id值
       * lable ： 当前输入框的lable
       * key ： 需要赋值的key
       */
      this.JFData[0][key] = val
      this.$emit('update:JFData', this.JFData)
      this.$emit('getValues', name, val, label, key)
    },
    setValue1(name, val, label, key) {
      /**
       * name: 需要展示的name
       *  val： 选择的id值
       * lable ： 当前输入框的lable
       * key ： 需要赋值的key
       */
      this.JFData[0][key] = val
      this.$emit('update:JFData', this.JFData)
      this.$emit('getValues', name, val, label, key)
    },
    async getMessage2() {
      this.multipleSelection111[0].eca_RowState = 'modified'
      let params = {
        accessCode: '77ad6c1591e54d4fbc45ecc90374a2a210',
        cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
        params: {
          dataguid: this.dataguid,
          strParams: JSON.stringify([{ PKID: this.multipleSelection111[0].PKID }]),
          token: window.localStorage.getItem('token')
        }
      }
      const res = await FileServerProxy(params)
      if (JSON.parse(res.data.data).Success) {
        // this.getTableData11()
        this.getData()
      }
    },
    async handleAddusers11(data) {
      if (data == '添加') {
        this.isShow111 = true
      } else {
        this.$confirm({
          title: '提示',
          message: '确认删吗？',
          btn: {
            okText: '确定',
            cancelText: '取消'
          }
        })
          .then(() => {
            // do something
            this.getMessage2()
          })
          .catch(() => {
            console.log('no')
          })
      }
    },
    async getData(){
        let data = [{ "field": "TO_ROW_GUID", "value": this.rowData.ROW_GUID }]
        const date = await GSA_Search(this.dataguid,data)
        console.log(this.dataguid,date,'hzldate')
        if(date.Data.length == 0){
            this.isadd = true
            this.tableData = []
        } else {
            this.tableData = date.Data
            console.log(date.Data,'da')
            this.isadd = false
        }
    },
    //获取枚举数据.em.emitData
    getEnum() {
      this.contentData.forEach(async (item) => {
        if (item.emitData) {
          let params = {
            accessCode: '688bd3883572440a859dfd8ba9194e7b',
            cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
            params: {
              dataguid: item.emitData,
              searchObject: JSON.stringify([]),
              token: window.localStorage.getItem('token')
            }
          }
          const res = await FileServerProxy(params)
          let newData = JSON.parse(res.data.data).Data
          item.NYDARR = []
          item.NYDARR.push(...newData)
        } else {
        }
      })
    }
  },
  components: {
    selectPicker
  },
  props: {
    //弹出框数据
    contentData: {
      typeof: Array,
      default: function () {
        return [
          
        ]
      }
    },
    rowData:{
        typeof: Object,
    },
    //标题
    title: {
      typeof: String,
      default: '测试'
    },
    //是否可编辑
    disable: {
      typeof: String,
      default: ''
    },
    //是否显示删除按钮
    isShow: {
      type: Boolean,
      default: true
    },
    //是否显示按钮
    ISBianji: {
      type: Boolean,
      default: true
    },
    contentData1: {
      typeof: Array,
      default: function () {
        return [
        //   {
        //     label: '踏勘意见',
        //     key: 'XCSJ1' //绑定的字段
        //   },
        //   {
        //     label: '是否需要再次踏勘',
        //     key: 'XCSJ2'
        //   },
        //   {
        //     label: '人员',
        //     key: 'XCSJ4'
        //   },
        //   {
        //     label: '踏勘时间',
        //     key: 'XCSJ3'
        //   },
        //   {
        //     label: '文件名称',
        //     key: 'XCSJ3'
        //   }
        ]
      }
    },
    button1: {
      typeof: Array,
      default: function () {
        return ['添加意见', '删除意见']
      }
    },
    JFData: {
      typeof: Array,
      default: function () {
        return [
        //   {
        //     XCSJ1: '1',
        //     XCSJ2: '1',
        //     XCSJ3: '1',
        //     XCSJ4: '1',
        //     SSS: '1',
        //     SSX: '1',
        //     SSZ: '1',
        //     SSC: '1'
        //   }
        ]
      }
    },
    //
    dataguid:{
        typeof: String
    }
  }
}
</script>

<style lang="scss">
.tableAdd .van-field__label {
  color: black;
  font-weight: bold !important;
  font-size: 13px !important;
  width: 8em;
}

.tableAdd .van-field__control {
  text-align: right;
}

.tableAdd .van-radio--horizontal {
  margin-right: 30px;
}

.tableAdd .van-collapse-item__content {
  padding: 6px;
  color: black;
}

.tableAdd .el-table th.el-table__cell > .cell {
  color: black;
}

.tableAdd .subTitle {
  width: 50%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  position: relative;
  display: flex;
  align-items: center;
  // border-bottom: 1px solid #9b9b9b;
  padding-left: 10px;

  .line {
    width: 6px;
    height: 26px;
    background: #3f8ffc;
    display: inline-block;
    margin-right: 10px;
  }
}

.tableAdd .footerButton {
  width: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
